iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0

文章同步更新在 CodeFictionist

第一天我們講了構成 CSS 動畫的兩個要素:@keyframesanimation。第二天我們探討了如何使用 transform 對元素做變形。
我們在簡短來複習一下:

  • @keyframesanimation 負責控制動畫的時間進度
  • transform 負責控制元素的變形,包括旋轉、縮放、移動和傾斜等效果。

基本上來說,animation + transform 的組合可以創造出目前大部分網站上看得到的動畫效果。之後的章節也會有更多使用到他們的地方。
那今天的主題就是把前兩天探討的內容結合起來,創造一個簡單的複合式動畫效果。
我們可以先來看 code:

<div class="container">
  <p>2024 iT 鐵人賽</p>
</div>
.container {
 border: black dashed;
 display: flex;
 justify-content: center;
 padding: 50px 0;
 font-family: Arial, sans-serif;
}

p {
 font-size: 24px;
 color: #333;
 opacity: 0;
 animation: fadeZoomInOut 6s ease-in-out infinite;
}

@keyframes fadeZoomInOut {
 0%,
 100% {
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
 }
 50% {
  opacity: 1;
  transform: scale(2) rotate(360deg);
  color: #b0e0e6;
 }
}

從上面的 CSS 當中,你是否能從裡面的動畫與變形規則想像出這個動畫的樣子呢?
我們接下來解析上述的 code 做了什麼事。


animation

這裡的 animation 應用了一個叫做 fadeZoomInOut 的關鍵影格。
且我們規定了這個動畫的總執行時間為 6 秒,並且使用 ease-in-out (緩慢開始,中間加速,然後緩慢結束) 的時間函數。
最後我們規定這個動畫要無限循環。

@keyframestransform

這裡我們用 @keyframes 定義了一個 fadeZoomInOut 的關鍵影格,裡面又拆成了三個時間點:0%、50%、100%。
在 0% 與 100% 的時間點,我們規定了元素的透明度為 0,且元素的大小為原來的一半,旋轉角度為 0 度。
在 50% 的時間點,我們規定了元素的透明度為 1 (就是正常顏色啦),且元素的大小為原來的兩倍,旋轉角度為 360 度。

綜上所述,我們可以想像一下,這個動畫會是這樣的:
2024 iT 鐵人賽 這段文字會重複執行一段 6 秒的動畫。在前 3 秒,文字會慢慢變大出現 (opacityscale) 且由黑色變成粉藍色 (color),然後旋轉 360 度 (rotate)。接著在後 3 秒,文字又會慢慢變小消失 (opacityscale) 且變回黑色 (color),然後也是旋轉 360 度 (rotate)。

這樣,我們就完成一個簡單的複合動畫效果了!
是說這個效果看起來好老...

範例 - 超老派旋轉字


上一篇
Day 02 - CSS 變形基礎
下一篇
Day 04 - animation vs transition
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言